<template>
  <div>
    <div>
      <!-- 事件对象e可以直接在fn当中接收然后使用 -->
      <button @click="fn">按钮</button>
      <!-- 但是如果传参了，那就需要带了 -->
      <button @click="fn1(3, $event)">按钮</button>

      <!-- 阻止a标签跳转 -->
      <form @click="fn">
        <input type="text" />
        <button>提交</button>
      </form>

      <!-- 事件修饰：vue提供事件修饰符，可以快速阻止默认行为或者防止冒泡 -->
      <a href="" @click.prevent.stop="fn2">注册</a>

      <form action="http://www.itcast.cn">
        <input type="text" />
        <button @click.prevent.stop="fn">提交</button>
      </form>

      <!-- 判断用户是否按了回车 -->
      <input type="text" @keyup.enter="keyUp" />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    fn(e) {
      console.log(e)
    },
    fn1(num, e) {
      console.log(num, e)
    },
    fn2() {
      console.log(1)
    },
    fn3(e) {
      e.preventDefault() //阻止默认提交
    },
    father() {
      console.log('我是父元素触发事件')
    },
    keyUp() {
      console.log('内容')
    },
  },
}
</script>

<style scoped></style>
